<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 引入React相关的包 -->
    <!-- 提供React对象 -->
    <script src="../js/react.development.js"></script>
    <!-- 它依赖于React, 所以必须后引入 -->
    <script src="../js/react-dom.development.js"></script>
</head>

<body>
    <!-- 2. 在页面上创建一个空的div容器元素 -->
    <div id="root"></div>
    <script>
        /* 3. 创建一个React元素  不是DOM元素*/
        /* 
        React.createElement(
          type,  // 标签名 => h1
          [props], // 包含所有标签属性的对象   => {title: '你好, React!'}
          [...children] // n个子节点 => 'Hello React!'
        )
        */
        const element = React.createElement('h1', 
        {
            title: '你好 世界!'
        },
         'Hello World!!')
        console.log(element);


        /* 4. 将React元素渲染到页面 */
        /* 
        ReactDOM.render(
          element,  // 要渲染的React元素
          container // 页面中的容器DOM元素
        )
        */
        ReactDOM.render(element, document.getElementById('root'))
    </script>
</body>

</html>